<?php

require_once('db.php');

?>

<!DOCTYPE html>
<html lang=="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>eTAXWARE RESTO</title>   
	<!--<link href="assets/css/bootstrap.css" type="text/css" charset="utf-8">-->
    <link href="assets/css/metro-bootstrap.css" rel="stylesheet">
    <link href="assets/css/metro-bootstrap-responsive.css" rel="stylesheet">
    <link href="assets/css/iconFont.css" rel="stylesheet">
	
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/css/prettify.css" rel="stylesheet">
	<link href="assets/css/product_slider.css" rel="stylesheet">
	
	
    <!-- Load JavaScript Libraries -->
	<!-- <script  src="assets/js/bootstrap.js"></script> -->
    <script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/metro.min.js"></script>
	<script src="assets/js/jquery.widget.min.js"></script>
	<script src="assets/js/metro-dialog.js"></script>
	
	
	<!--<script src="assets/js/jquery-1.10.0.min.js"></script>-->
    
    
    <script src="assets/js/prettify.js"></script>
	<script src="assets/js/accounting.min.js"></script>	
	<script src="assets/js/kasir.js"></script>
	<script src="assets/js/shortcut.js"></script>
	<script src="assets/js/jquery.limitkeypress.js"></script>
	<script src="assets/js/product_slider.js"></script>
	<script src="assets/js/category_slider.js"></script>
	
	    

	
    <!-- Metro UI CSS JavaScript plugins -->
    <script src="assets/js/load-metro.js"></script>
	
    <!-- Local JavaScript 
    <script src="assets/js/docs.js"></script>
    -->
	
	
	<!-- jQuery & jQuery UI + theme (required) -->
	<link href="assets/css/jquery-ui.css" rel="stylesheet">
	<!--<script src="assets/js/jquery-1.8.3.js"></script>-->
	<script src="assets/js/jquery-ui.min-1.9.0.js"></script>

	<!-- keyboard widget css & script (required) -->
	<link href="assets/css/keyboard.css" rel="stylesheet">
	<script src="assets/js/jquery.keyboard.js"></script>
	
	
	
	<script type="text/javascript">
		function init() {
			/*short cut for SEACRH=ESC*/
			shortcut.add("Esc", function() {
				$('#input_search').focus();
			});
			/*short cut for PAYMENT=F1*/
			shortcut.add("F1", function() {
				alert('F1 Pressed');
				//$('#input_search').focus();
			});
			/*short cut for SAVE=F2*/
			shortcut.add("F2", function() {
				alert('F2 Pressed');
				//$('#input_search').focus();
			});
			/*short cut for CANCEL=F3*/
			shortcut.add("F3", function() {
				alert('F3 Pressed');
				//$('#input_search').focus();
			});
			
			/*short cut for FOOD=CTRL+F*/
			shortcut.add("Ctrl+F", function() {
				alert('Ctrl+F Pressed');
				//$('#input_search').focus();
			});
			/*short cut for DRINK=CTRL+D*/
			shortcut.add("Ctrl+D", function() {
				alert('Ctrl+D Pressed');
				//$('#input_search').focus();
			});
			/*short cut for OTHER=CTRL+O*/
			shortcut.add("Ctrl+O", function() {
				alert('Ctrl+X Pressed');
				//$('#input_search').focus();
			});
			/*short cut for EXIT=CTRL+X*/
			shortcut.add("Ctrl+X", function() {
				alert('Ctrl+X Pressed');
				//$('#input_search').focus();
			});
			
			/*short cut for PAGEUP=PGUP*/
			shortcut.add("pu", function() {
				//alert('PgUp Pressed');
				$('#up').trigger('click');
				//$('#input_search').focus();
			});
			
			
			/*short cut for PAGEDOWN=PGDN*/
			shortcut.add("pd", function() {
				//alert('PgDn Pressed');
				$('#down').trigger('click');
				//$('#input_search').focus();
			});
			
		};
		
		window.onload=init;
		
		
	</script>
	
	<style>
		
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#df_create_usr { width: 350px; margin: 20px 0; }
		div#df_create_usr table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#df_create_usr table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
		
		
	</style>
</head>



<body class="metro">

	<div class="navigation-bar blue">
    <div class="navigation-bar-content container">
        <a href="#" class="element">ETAXWARE RESTO<sup>2.0</sup></a>
        <span class="element-divider"></span>
		<a href="#" class="element">PT. BANK RAKYAT INDONESIA </a>
		<a href="#" class="element place-right ">	
			<span class="win-commandicon win-commandring icon-user"></span>
		</a>
		
		
    </div>
	
	</div>
	
	</header>
	
	
    <div class="container">
	<div class="grid">
	<div class="row">
		<div class="span5">
		<table class="table table-striped table-condensed table-hover pos_tbl">
					<thead>
					<tr class="warning">
						<th class="text-left" style="width: 15%">X</th>
						<th class="text-left" style="width: 40%">ITEMS</th>
						<th class="text-left" style="width: 20%">QTY</th>
						<th class="text-left" style="width: 35%">@PRICExQTY</th>
					</tr>
					</thead>
		</table>
					
		<div id="tbl_pos_div">
				<table id="tbl_sales" class="table striped pos_tbl">
					<tbody id="tbody_sales">			
					
					</tbody>
				</table>
				

		</div>	
								
				<table id="tbl_summary"  class="table table-striped table-condensed table-hover pos_tbl">
					<tbody>
					<tr class="success">
						<td class="text-left" >Total Items</td>
						<td class="text-right" id="t_items">0</td>
						<td class="text-left">Sub Total</td>
						<td class="text-right" id="t_price">0.00</td>
					</tr>
					<tr class="success">
						<td class="text-left" >Discount</td>
						<td class="text-right" id="t_discount">0.00</td>
						<td class="text-left">S-Charge</td>
						<td class="text-right" id="t_scharge">0.00</td>
					</tr>
					<tr class="success">
						<td class="text-left"></td>
						<td class="text-left"></td>
						<td class="text-left">Tax</td>
						<td class="text-right" id="t_tax">0.00</td>
					</tr>
					<tr class="success">
						<td class="text-left"></td>
						<td class="text-left"></td>
						<td class="text-left" >Grand Total</td>
						<td class="text-right" id="t_grand" >0.00</td>
					</tr>
					</tbody>
				</table>
				
				<p></p>
				<div id="btn_payment_div">	
				<table class="table table-striped table-condensed table-hover pos_tbl">
					<tbody>
					<tr class="warning">
						<td class="text-left"><button class="btn_pos" style="margin-right:0; width:100px;" style="z-index:9996" id="btn_reset">   RESET  </button></td>
						<td class="text-left"><button class="btn_pos" style="margin-right:0; width:100px;" style="z-index:9997">  SAVE ORDER  </button></td>
						<td class="text-left"><button class="btn_pos" style="margin-right:0; width:120px;" style="z-index:9998">PAYMENT</button></td>
					</tr>
					
					</tbody>
				</table>
				</div>
		
		</div>
		
		<div class="span9">
				
				
			<div id="btn_category_div">	
				
				<table class="table striped" >
					<tbody>
					<tr class="warning">
						<div class="input-control text" data-role="input-control">
                                        <input type="text" id="input_search" placeholder="QTY*ID" style="z-index:9999">
										<button class="btn-search"></button>
                        </div>
					</tr>
					</tbody>
				</table>
				
				
				
				<table class="table table-striped table-condensed table-hover pos_tbl">
					<tbody>
					<tr class="warning">
						<td align="left">
						<div id="kiri">
						<button  class="btn_pos btn_left" style="margin-center:0; width:50px;">&#8678;</button>
						</div>
						</td>
						<td align="center">
						<div id="cat_div">
						<ul>
							<li><button class="btn_pos" style="margin-center:0; width:100px;" id="all_prod">ALL PRODUCT</button></li>
							<?php	
							$sql 		= "select * from tb_display order by disp_id asc";
							$result 	=  mysql_query($sql,$link);
							$tmp 		= "";
							while($data_get=@mysql_fetch_array($result)){	
								$tmp	=  $data_get['disp_id'].'|'.$data_get['disp_name'];
								$nm		=  $data_get['disp_name'];
								if (strlen($data_get['disp_name'])>12){$nm = substr($data_get['disp_name'],0,12).'..';}
							?>			
								<li><button class="btn_pos" style="margin-center:0; width:100px;" id="<?php echo $tmp; ?>"><?php echo $nm; ?></button></li>
							<?php
							}
							?>
																		
						</ul>
						</div>
						</td>
						<td align="right">
						<div id="kanan">
						<button class="btn_pos  btn_right" style="margin-center:0; width:50px;">&#8680;</button>
						</div>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
					
				
					
			<div id="wrap">

				<div id="window">
						<ul>
						<?php	
							$sql 		= "select * from tb_product order by prod_id asc";
							$result 	=  mysql_query($sql,$link);
							$tmp 		= "";
							while($data_get=@mysql_fetch_array($result)){	
								$tmp	=  	$data_get['prod_id'].'|'.$data_get['prod_name'].'|'.$data_get['retail_price'].'|'.$data_get['prod_tax'].'|'.$data_get['prod_disc'].'|'.$data_get['prod_scharge'];
								$tip	=  	'Product : '.$data_get['prod_name'].', Price : '.$data_get['retail_price'].', Tax : '.$data_get['prod_tax'].', Disc : '.$data_get['prod_disc'].', SCharge : '.$data_get['prod_scharge'];
								if (strlen($data_get['prod_name'])>1){$nm = substr($data_get['prod_name'],0,10);}
						?>			
								<li><button title="<?php echo $tip; ?>" type="button" class="btn_product" id="<?php echo $tmp; ?>"><img src="<?php echo $data_get['prod_img']; ?>" ><?php echo $nm; ?></button></li>
						<?php
							}
						?>
						  </ul>
				</div>
				<div id="window_ctl">
					<div id="up"><a href="#"><button class="btn_ud" style="height:220px;width:50px;" >&#9650;</button></a></div>
					<div id="down"><a href="#"><button class="btn_ud" style="height:220px;width:50px;" >&#9660;</button></a></div>
				</div>
				
			</div>
					
				
			<div id="btn_others_div">
			<table class="table table-striped table-condensed table-hover pos_tbl">
					<tbody>
					<tr class="warning">
						<td align="center">
						<button class="btn_pos" style="margin-center:0; width:100px;">ORDERS</button>
						<button class="btn_pos" style="margin-center:0; width:100px;">SALES</button>
						<button class="btn_pos" style="margin-center:0; width:100px;">REFUND</button>
						<button class="btn_pos" style="margin-center:0; width:100px;">CASH INIT</button>
						</td>
					</tr>
					</tbody>
				</table>
			</div>		
				
		</div>
	</div>
	</div>
    </div>

	<!-- bootstrap alert -->
	<div class="alert alert-success"></div>
	<div class="alert alert-info"></div>
	<div class="alert alert-warning"></div>
	<div class="alert alert-danger"></div>
    <!--   end of alert --> 



<script language="javascript">
	
	var row_i = 0 ;
	var menu = new Array();
		menu = [{id:"G106",name :"Nasi Goreng",qty : 1,price : 30000.00,scharge :0.50,tax :10.00,discount : 0.50},
					{id:"G107",name :"Ikan Gurame",qty : 1,price : 100000.00,scharge :0.50,tax :10.00,discount : 0.50},
					{id:"G108",name :"Es Kelapa",qty : 1,price : 12500.00,scharge :0.50,tax :10.00,discount : 0.50}
			   ];



	/*--------------------------------- Utility Function ---------------------------------*/
		function addquote(s){
		 return "'"+s+"'";
		}
		
		
	/*----------------------------- End of Utility Function ------------------------------*/
		
		
		
		
	/*--------------------------------ON DOCUMENT READY-----------------------------------*/
	$(document).ready(function(){
		
		var bill = new Bill();	
		
		/*****************************/
		/* set focus to search input */
		/*****************************/
		$('input[id="input_search"]').focus();
		/*****************************/
		
	
		/*****************************/
		/* Reset Order Payment 	     */
		/*****************************/
		$('button[id="btn_reset"]').click(function () {
		//	bill.reset();
			$( "#df_create_usr" ).dialog( "open" );
		});
		/*****************************/
	
		
		/*****************************/
		/* Delete Order Items 	     */
		/*****************************/	
		$("#tbl_sales").on("click",'button[id^="del-"]',function(){
			var delVAL=$(this).attr('value');
			var dl_val=delVAL.split("-");
			bill.remove_item(dl_val); 
		});
		/*****************************/


		
		/*****************************/
		/* Add Order Items 	         */
		/*****************************/	
		$('button[class="btn_product"]').click(function(){
			var btn_val = $(this).attr('id');
			var arr_val = btn_val.split('|');
			
			var x = {"id":arr_val[0],"name" :arr_val[1],"qty" : 1,"price" : parseFloat(arr_val[2]).toFixed(2),"scharge" :parseFloat(arr_val[5]).toFixed(2),"tax" :parseFloat(arr_val[3]).toFixed(2),"discount" : parseFloat(arr_val[4]).toFixed(2)};
			bill.add_item(x); 
			
		});
		/*****************************/
			
			
		  
		/********************************************************************/
		/*    regex search input                                            */
		/********************************************************************/	
		$( "#input_search" ).keypress(function( event ) {
			if ( event.which == 13 ) {
				var str = $(this).val();
				var patt = new RegExp(/^[1-9]*.\*.[a-zA-Z0-9]*$/);
				var res = patt.test(str);
				if (res){alert('Match..')}else{alert('Wrong Search Pattern. \n Cari dengan Format : Jml x IDProduct')};
				event.preventDefault();
			}
		});
		/********************************************************************/	
		
		
		/********************************************************************/
		/*    attach onScreen Keyboard to inputs                            */
		/********************************************************************/			
		$('#input_search').keyboard({
			usePreview		: true,
			layout 			: 'custom',
			customLayout	: { 'default': ['7 8 9', '4 5 6', '1 2 3','0 * {clear}','{cancel} {accept}'] },
			restrictInput	: true,
			preventPaste	: true, 
			autoAccept		: true,
			appendLocally	: true,
			appendTo 		: $('#input_search'),
			position		: 	{
										of: $('#input_search'), 
										my: 'center bottom',
										at: 'center bottom',
										at2: 'center bottom'
								},
			css 			: 	{
								  // input & preview styles
								  input          : 'ui-widget-content',
								  // keyboard container - this wraps the preview area (if `usePreview` is true) and all keys
								  container      : 'ui-widget-content ui-widget ui-helper-clearfix',
								  // default keyboard button state, these are applied to all keys, the remaining css options are toggled as needed
								  buttonDefault  : 'ui-state-default',
								  // hovered button
								  buttonHover    : 'ui-state-hover',
								  // Action keys (e.g. Accept, Cancel, Tab, etc); this replaces the "actionClass" option
								  buttonAction   : 'ui-state-active',
								  // used when disabling the decimal button {dec} when a decimal exists in the input area
								  buttonDisabled : 'ui-state-disabled'
								},
								
			initialized: function(e, keyboard, el) {},
			accepted: function(e, keyboard, el) {},
			canceled: function(e, keyboard, el) {},
			hidden: function(e, keyboard, el) {},
			visible: function(e, keyboard, el) {},
			beforeClose: function(e, keyboard, el, accepted) {}
			
		});
		
		
	
		
		
	
		/********************************************************************/
	
	
	
	
	
	
	
		/********************************************************************/
		/*    Dialog Form                                                   */
		/********************************************************************/		
		$( "#df_create_usr" ).dialog({
		autoOpen: false,
		height: 300,
		width: 350,
		modal: true,
		buttons: {
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		}
		});
		/********************************************************************/
	
	}); //End Of Doc Ready 	
	
	
	
</script>



<!----------MODALS AND DIALOG------------->
<!--			ALERT					-->	
<!---------------------------------------->
<div id="df_create_usr" title="Create new user" class="ui-dialog">
	<!--<p class="validateTips">All form fields are required.</p>-->
	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
	</fieldset>
	</form>
</div>
<!---------------------------------------->



</body>
</html>


<?php 

mysql_close($link);

?>